<template>
	<el-dialog title="合同计划列表" v-model="visible" :close-on-click-modal="false" draggable>
		<div class="mb8" style="width: 100%">
			<el-button icon="folder-add" type="primary" @click="detailFormDialog.openDetailDialog()" v-auth="'oa_projectContract_add'"> 新 增 </el-button>
			<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'oa_projectContract_del'" @click="handleDelete(selectObjs)">
				删除
			</el-button>
		</div>

		<el-table
			:data="state.dataList"
			v-loading="state.loading"
			border
			:cell-style="tableStyle.cellStyle"
			:header-cell-style="tableStyle.headerCellStyle"
			@selection-change="selectionChangHandle"
			@sort-change="sortChangeHandle"
		>
			<el-table-column type="selection" width="40" align="center" />
			<el-table-column type="index" label="#" width="40" />
			<el-table-column prop="contractName" width="140" label="合同名称" show-overflow-tooltip />
			<el-table-column prop="contractNumber" width="185" label="合同编号" show-overflow-tooltip />
			<el-table-column prop="contractYear" label="年" show-overflow-tooltip />
			<el-table-column prop="actualMoneyCurrentYear" label="实际合同金额" show-overflow-tooltip />
			<el-table-column prop="invoiceAmountYear" label="开票金额" show-overflow-tooltip />
			<el-table-column prop="expenditure" label="支出金额" show-overflow-tooltip />
			<el-table-column prop="agencyFee" label="居间费" show-overflow-tooltip />
			<el-table-column prop="contractAmountYear" label="年合同额" show-overflow-tooltip />
			<el-table-column prop="contractSettlementAmount" label="审定（结算）金额" show-overflow-tooltip />
			<el-table-column prop="receivedAmount" label="已收账款" show-overflow-tooltip />
			<el-table-column prop="receivableAmount" label="应收账款" show-overflow-tooltip />
			<el-table-column prop="dueInAmount" label="待收账款" show-overflow-tooltip />
			<el-table-column prop="uncollected" label="未收账款" show-overflow-tooltip />
			<el-table-column prop="planReturnDate" label="计划回款日期" show-overflow-tooltip />
			<el-table-column prop="needReturnMoneyYear" label="当年需回款额" show-overflow-tooltip />
			<el-table-column prop="needRealReturnMoneyYear" label="当年需实际回款额" show-overflow-tooltip />
			<el-table-column prop="realReturnMoneyYear" label="当年实际回款额" show-overflow-tooltip />
			<el-table-column prop="remainderMoneyYear" label="当年剩余回款" show-overflow-tooltip />
			<el-table-column prop="paymentStatus" label="当年回款状态" show-overflow-tooltip>
				<template #default="scope">
					<dict-tag :options="payment_status" :value="scope.row.paymentStatus"></dict-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template #default="scope">
					<el-button icon="edit-pen" text type="primary" v-auth="'oa_projectContract_edit'" @click="detailFormDialog.openDetailDialog(scope.row.id)"
						>编辑
					</el-button>
					<el-button icon="delete" text type="primary" v-auth="'oa_projectContract_del'" @click="handleDelete([scope.row.id])">删除 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">关闭</el-button>
			</span>
		</template>

		<!-- 合同计划表单弹窗 -->
		<detail-form ref="detailFormDialog" @refresh="getContractDetailList()" />
	</el-dialog>
</template>

<script setup lang="ts" name="ContractPlanListDialog">
import { useMessage, useMessageBox } from '@/hooks/message';
import { fetchList, delObjs } from '@/api/oa/contractDetail';
import { BasicTableProps, useTable } from '@/hooks/table';
import { useDict } from '@/hooks/dict';
import { Ref } from 'vue';

const currentContractId = inject<Ref<string>>('currentContractId')!;

// 定义字典
const { payment_status } = useDict('payment_status');

const DetailForm = defineAsyncComponent(() => import('./detailForm.vue'));

// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

const detailFormDialog = ref();
const visible = ref(false);
const loading = ref(false);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		contractId: currentContractId.value,
	},
	pageList: fetchList,
	createdIsNeed: false,
});

//  table hook
const { currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state);

// 打开弹窗
const openDetailListDialog = () => {
	visible.value = true;
	getContractDetailList();
};

/** 获取合同关联的计划列表 */
const getContractDetailList = () => {
	loading.value = true;
	fetchList({
		contractId: currentContractId.value,
		current: state.pagination?.current,
		size: state.pagination?.size,
	})
		.then((res: any) => {
			state.dataList = res.data.records;
		})
		.finally(() => {
			loading.value = false;
		});
};

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};

// 删除操作
const handleDelete = async (ids: string[]) => {
	try {
		await useMessageBox().confirm('此操作将永久删除');
	} catch {
		return;
	}

	try {
		await delObjs(ids);
		getContractDetailList();
		useMessage().success('删除成功');
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};

// 暴露变量
defineExpose({
	openDetailListDialog,
});
</script>
